<template>
  <div class="main">
    <!--操作栏  -->
    <div class="nav clear">
      <div class="btn">
        <el-button type="success" icon="el-icon-plus" @click="add()"
          >新增</el-button
        >
      </div>
      <div class="search">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button class="el-icon-search"></el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="150"> </el-table-column>
          <el-table-column prop="type" label="类型" width="200"></el-table-column>
          <el-table-column prop="account" label="账号名" width="300"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="300"></el-table-column>
          <el-table-column prop="state" label="状态" width="200"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="">
              <el-button type="primary" icon="el-icon-edit-outline" @click="modify()">修改</el-button>
              <el-button type="danger" icon="el-icon-close" @click="open">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 页码内容 -->
    <div class="pages clear">
      <div class="leftPage">
        <span>共 <b>4</b> 条 | 每页 <b>20</b> 条 | 共 <b>6</b> 页</span>
      </div>
      <div class="rightPage">
        <el-pagination background layout="prev, pager, next" :total="60">
        </el-pagination>
      </div>
    </div>
   
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "",
  components: {},
  data() {
    return {
      input: "",
      // 表格渲染的模拟数据
      tableData: [
        {
          id: 1,
          type: "系统邮件",
          account:'客户询问信',
          createTime: "2020/5/5 12:20:13",
          state: "有效"
        },
        {
          id: 2,
          type: "系统邮件",
          account:'客户询问信',
          createTime: "2020/5/5 12:20:13",
          state: "有效"
        },
        {
          id: 3,
          type: "系统邮件",
          account:'客户询问信',
          createTime: "2020/5/5 12:20:13",
          state: "有效"
        },
        {
          id:4,
          type: "系统邮件",
          account:'客户询问信',
          createTime: "2020/5/5 12:20:13",
          state: "有效"
        }
      ]
    };
  },
  methods: {
    // 点击新增按钮出现新增页面
    add() {
      this.$router.push("/home/accountManagement/accountManagementAdd");
    },
    // 点击修改按钮出现修改页面
    modify() {
      this.$router.push("/home/accountManagement/accountManagementModify");
    },
    //删除的确认弹框
    open() {
      this.$confirm("删除该记录将不能恢复，确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
html,
body {
  height: 100%;
}
.main {
  background-color: white;
  margin-top: 20px;
  .nav {
    padding: 0 0 20px 0;
    .btn {
      float: left;
    }
    .search {
      float: right;
      .el-input {
        width: 200px;
      }
    }
  }
  .pages {
    background-color: #fafafa;
    padding: 20px;
    .leftPage {
      float: left;
    }
    .rightPage {
      float: right;
    }
  }
}

</style>
